<template>
  <div class="allviedeo-box">
    <div class="allvideo-info-box">
      <div class="follow-video">
        <div class="follow-video-title">
          <div class="title-left">
            <p class="title">关注</p>
            <!-- <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span> -->
          </div>
          <!-- <div class="title-right">换一换</div> -->
        </div>
        <div class="follow-video-info">
          <div class="all-follow-video">
            <VideoBox v-for="data in followList" :key="data.video_id" :data="data"></VideoBox>
          </div>
           <div class="box">
            <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VideoBox from '@/components/video/videoBox.vue'
import { mapState } from 'vuex'
import http from '@/util/http'
import Loading from '@/components/utilView/loadingView.vue'
import scroll from '@/util/scroll'
export default {
  components: {
    VideoBox,
    Loading
  },
  data () {
    return {
      followList: [], // 数据列表
      page: 1, // 数据页码
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false // 加载中提示

    }
  },
  mounted () {
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动
    http.getfollowTv(this.user.uid, this.page).then(res => {
      this.followList = res.data.followTvList
      console.log(res.data)
      if (res.data.followTvList.length < 10) {
        this.noMore = true
        // 显示没有更多数据
        this.loadShow = true
        this.noMoreShow = true
      }
      this.page++
    })
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值

      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            http.getfollowTv(this.user.uid, this.page).then((res) => {
              this.followList = this.followList.concat(res.data.followTvList)
              console.log(this.followList)
              // 隐藏加载更多提示
              this.loadShow = false
              this.loading = false
              this.isRequest = false
              // 判断是否还有足够数据
              if (res.data.followTvList.length < 10) {
                this.noMore = true
                // 显示没有更多数据
                this.loadShow = true
                this.noMoreShow = true
              }
              // 增加一页
              this.rePage++
            })
          }
        }
      }
    }
  },

  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }

}
</script>

<style lang="scss" scoped>
.allviedeo-box {
  width: 100%;

  .allvideo-info-box {
    width: 100%;

    .follow-video {
      width: 100%;

      .follow-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: 24px;
            color: #333;
            padding-right: 15px;
          }
          .title-more {
            font-size: 14px;
            color: #939393;
          }
        }
        .title-right {
          font-size: 14px;
          color: #939393;
        }
      }
      .follow-video-info {
        width: 100%;

        .all-follow-video {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .all-follow-video-box {
            width: 32%;
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin: 25px 0 0 10px;

            .video-img {
              width: 100%;
              overflow: hidden;
              border-radius: 5px 5px 0 0;
              position: relative;

              img {
                display: block;
                width: 100%;
                border-radius: 5px 5px 0 0;
                transition: all 0.3s;

                &:hover {
                  filter: brightness(90%);
                  transform: scale(1.1);
                  opacity: 1;
                }
              }
              .duration{
                color: #eee;
                font-size: 12px;
                padding: 0 5px;
                background: rgba($color: #000, $alpha: 0.8);
                position: absolute;
                bottom: 5%;
                right: 5%;
              }
            }
            .video-infotitle {
              font-size: 14px;
              font-weight: 700;
              color: #333;
              padding: 10px 10px 20px;

              &:hover {
                color: #f90;
              }
            }
            .publish-author {
              width: 100%;
              display: flex;
              align-items: center;
              padding-bottom: 10px;

              .left {
                width: 15%;
                padding: 0 15px;

                .publish-author-img {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  overflow: hidden;
                  border: 1px solid #f5f5f5;

                  img {
                    display: block;
                    width: 100%;
                    border-radius: 50%;

                    &:hover {
                      filter: brightness(90%);
                      opacity: 1;
                    }
                  }
                }
              }
              .right {
                width: 80%;
                line-height: 18px;
                font-size: 12px;
                color: #939393;

                .publish-author-name {
                  &:hover {
                    color: #f90;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
